<template>

  <Panel shadow style="padding: 30px;">
    <el-form label-position="top">
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item :label="$t('m.Announcement_Title')" required>
            <el-input v-model="discussion.discussion_title"
                :placeholder="$t('m.Announcement_Title')">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item :label="$t('m.DiscussionType')" required>
            <el-select  :placeholder="$t('m.DiscussionType')" v-model="discussion.discussion_type">
              <el-option label="题解" value="Solution"></el-option>
              <el-option label="分享" value="Share"></el-option>
              <el-option label="问答" value="Integrated"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5" v-show="discussion.discussion_type === 'Solution'" >
          <el-form-item label="题号" required>
            <el-input clearable placeholder="请输入题号" v-model="problem_id">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2" v-show="isAdmin" >
          <el-form-item label="视频" required>
            <el-switch  v-model="discussion.is_video"> </el-switch>
          </el-form-item>
        </el-col>

      </el-row>
      <el-form-item :label="$t('m.Announcement_Content')" required>
          <!-- <mavon-editor :boxShadow="false" class="mavon" codeStyle="atom-one-dark" v-model="discussion.discussion_text"
              :ishljs="true" ref="md" /> -->
          <v-md-editor v-model="discussion.discussion_text" height="800px"></v-md-editor>
            
      </el-form-item>
    </el-form>
    <span >
      <el-button plain type="primary" @click.native="saveEditDiscussion">保存为草稿/仅对自己可见</el-button>
      <el-button type="primary" @click.native="finishCreateDiscussion">发布</el-button>
    </span>
  </Panel>

</template>

<script>
  import api from '@oj/api'
  import { mapGetters } from 'vuex'
  import { USER_TYPE } from '@/utils/constants'
  import Simditor from '@admin/components/Simditor.vue'
  export default {
    name: 'discussion-edit',
    components: {
      Simditor
    },
    data () {
      return {
        query: {
          discussionID: ''
        },
        rows: '',
        discussion: {},
        discussionID: '',
        problem_id: null
      }
    },
    mounted () {
      if (this.$route.params.problem_id !== '') {
        // this.$set(this.discussion, 'discussion_type', 'Solution')
        this.discussion.discussion_type = 'Solution'
        this.problem_id = this.$route.params.problem_id
      }
      this.init()
    },
    methods: {
      init () {
        this.getDiscussion()
      },
      getDiscussion () {
        this.discussionID = this.$route.params.discussionID
        console.log(this.$route.params.problem_id)
        // 编辑的讨论不是自己发起的
        api.getDiscussion(this.discussionID).then(res => {
          if ((this.user.admin_type !== USER_TYPE.SUPER_ADMIN) && res.data.data.created_by.username !== this.user.username) {
            console.log('error')
            this.$router.push({name: 'discussion-details', params: {discussionID: res.data.data.id}})
          }
          this.discussion = res.data.data
        })
      },
      saveEditDiscussion () {
        if (!this.discussion.discussion_title) { return }
        console.log(this.problem)
        if (this.problem_id !== null && this.discussion.discussion_type === 'Solution') this.discussion.problem_id = this.problem_id
        this.discussion.editing = true
        api['editDiscussion'](this.discussion).then(res => {
          console.log(res)
          // TO DO
          this.$router.push({name: 'discussion-list', params: {}})
        }).catch()
      },
      finishCreateDiscussion () {
        if (!this.discussion.discussion_title) { return }
        console.log(this.problem)
        if (this.problem_id !== null && this.discussion.discussion_type === 'Solution') this.discussion.problem_id = this.problem_id
        this.discussion.editing = false
        console.log(this.discussion)
        api['editDiscussion'](this.discussion).then(res => {
          console.log(res)
          this.goDiscussion()
          this.creating = false
        }).catch()
      },
      goDiscussion () {
        let that = this
        this.$router.push({name: 'discussion-details', params: {discussionID: that.discussion.id}})
      }
    },
    computed: {
      ...mapGetters(['user', 'theme']),
      isAdmin () {
        return this.user.admin_type === USER_TYPE.SUPER_ADMIN
      }
    },
    watch: {
      '$route' (newVal, oldVal) {
        if (newVal !== oldVal) {
          this.init()
        }
      }
    }
  }
</script>